import React, { useState, useEffect, useContext } from "react";
import { Avatar, Badge, List } from "antd";
import produce from "immer";
import moment from "moment";

import { HomeContext } from "../context";
// import Room from "./room";

import styles from "./style.module.scss";
import img3 from "../image_3.png";
import Room from "../room";
const avatar = (img) => <Avatar size={40} src={img} />;
export default function Conversation() {
    let { conversation, setActive } = useContext(HomeContext);
    let list = Object.entries(conversation).map(([key, value]) => value);
    return (
        <div className={styles.container}>
            <div className={styles.list}>
                <div className={styles.search}></div>
                <div className={styles.conversation}>
                    <List
                        className="custom-list"
                        itemLayout="horizontal"
                        dataSource={list}
                        renderItem={(item) => (
                            <List.Item
                                style={{ padding: "7px 12px" }}
                                onClick={() => {
                                    setActive(item.chatId)
                                }}
                            >
                                <List.Item.Meta
                                    avatar={<Avatar size={45} src={img3} />}
                                    title={item.remark}
                                />
                            </List.Item>
                        )}
                    />
                </div>
                <div className={styles.bottom}></div>
            </div>
            <div className={styles.board}>
                {list.map((item,index) => (
                    <Room {...item} key={index}/>
                ))}
            </div>
        </div>
    );
}
